﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Customize Floating Object</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    
    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <style type="text/css">
    /*css_begin*/
        label {
            display:inline-block;
            width: 60px;
            text-align: right;
            margin-right: 10px;
        }

        input[type="checkbox"] + label {
            width: 130px;
            text-align: left;
            margin-right: 0;
        }

        input[type="text"] {
            width: 80px;
        }

        input[type="button"] {
            width: 140px;
        }
    /*css_end*/
    </style>

    <script id="scriptInit" type="text/javascript">
    /*code_begin*/
    $(document).ready(function () {
        var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));
        initSpread(spread);
    });

    function initSpread(spread) {
        var spreadNS = GcSpread.Sheets;
        
        var sheet = spread.getSheet(0);
        sheet.isPaintSuspended(true);
        var customFloatingObject = new spreadNS.CustomFloatingObject("f0");
        customFloatingObject.startRow(1);
        customFloatingObject.startColumn(1);
        customFloatingObject.endColumn(6);
        customFloatingObject.endRow(6);
        var div = document.createElement('div');
        div.innerHTML = "<span>SpreadJS support CustomFloatingObject.</span><div style='border: 1px dotted red; width: 80%; margin:auto;'><ul><li>I am list one.</li><li>I am list two.</li><li>I am list three.</li></ul></div>";
        $(div).css('background', 'grey');
        customFloatingObject.Content(div);
        sheet.addFloatingObject(customFloatingObject);
        sheet.addPicture("f2", "images/splogo.png", 7, 1, 16, 4);
        sheet.isPaintSuspended(false);

        $("#isSheetProtected").change(function () {
            var sheet = spread.getActiveSheet();
            sheet.setIsProtected($(this).prop("checked"));
        });

        $("#isLocked").change(function () {
            var sheet = spread.getActiveSheet();
            var floatingObjects = _concat(sheet);
            if (floatingObjects) {
                var value = $(this).prop("checked");
                for (var index = 0; index < floatingObjects.length; index++) {
                    if (floatingObjects[index].isSelected()) {
                        floatingObjects[index].isLocked(value);
                    }
                }
            }
        });

        $("#isVisible").change(function () {
            var sheet = spread.getActiveSheet();
            var floatingObjects = _concat(sheet);
            if (floatingObjects) {
                var value = $(this).prop("checked");
                for (var index = 0; index < floatingObjects.length; index++) {
                    if (floatingObjects[index].isSelected()) {
                        floatingObjects[index].isVisible(value);
                    }
                }
            }
        });

        $("#dynamicMove").change(function () {
            var sheet = spread.getActiveSheet();
            var floatingObjects = _concat(sheet);
            if (floatingObjects) {
                var value = $(this).prop("checked");
                for (var index = 0; index < floatingObjects.length; index++) {
                    if (floatingObjects[index].isSelected()) {
                        floatingObjects[index].dynamicMove(value);
                    }
                }
            }
        });

        $("#dynamicSize").change(function () {
            var sheet = spread.getActiveSheet();
            var floatingObjects = _concat(sheet);
            if (floatingObjects) {
                var value = $(this).prop("checked");
                for (var index = 0; index < floatingObjects.length; index++) {
                    if (floatingObjects[index].isSelected()) {
                        floatingObjects[index].dynamicSize(value);
                    }
                }
            }
        });

        $("#moveFloatingObject").click(function () {
            var sheet = spread.getActiveSheet();
            var floatingObjects = _concat(sheet);
            var row = parseInt($("#moveRow").val());
            var col = parseInt($("#moveColumn").val());
            if (!isNaN(row) && !isNaN(col)) {
                if (floatingObjects) {
                    for (var index = 0, len = floatingObjects.length;index < len; index++) {
                        var fo = floatingObjects[index];
                        if (fo.isSelected()) {
                            fo.startRow(row);
                            fo.startColumn(col);
                            fo.startRowOffset(0);
                            fo.startColumnOffset(0);
                        }
                    }
                }
            }
            sheet.repaint();
        });

        $("#resizeFloatingObject").click(function () {
            var sheet = spread.getActiveSheet();
            var floatingObjects = _concat(sheet);
            var width = parseFloat($("#resizeWidth").val());
            var height = parseFloat($("#resizeHeight").val());
            if (!isNaN(width) && !isNaN(height) && width > 0 && height > 0) {
                if (floatingObjects) {
                    for (var index = 0, len = floatingObjects.length;index < len; index++) {
                        var fo = floatingObjects[index];
                        if (fo.isSelected()) {
                            fo.width(width);
                            fo.height(height);
                        }
                    }
                }
            }
            sheet.repaint();
        });

        $("#bringToForward").click(function() {
            var sheet = spread.getActiveSheet();
            var floatingObjects = _concat(sheet);
            var maxZIndex = 0, selectedCount = 0, selectedName = null;
            if (floatingObjects) {
                for (var index = 0, len = floatingObjects.length;index < len; index++) {
                    var fo = floatingObjects[index];
                    if (!fo || !fo.name || !fo.isSelected) {
                        continue;
                    }
                    var zIndex = sheet.getFloatingObjectZIndex(fo.name());
                    if (zIndex > maxZIndex) {
                        maxZIndex = zIndex;
                    }
                    if (fo.isSelected()) {
                        selectedCount++;
                        selectedName = fo.name();
                    }
                }
                if (selectedCount === 1) {
                    sheet.setFloatingObjectZIndex(selectedName, maxZIndex + 1);
                }
            }
        });
    };
    function _concat(sheet) {
        if (sheet) {
            var customFloatingObjects = sheet.getFloatingObjects();
            var pictures = sheet.getPictures();
            return pictures.concat(customFloatingObjects);
        }
        return [];
    }
    /*code_end*/
    </script>

</head>
<body>
    <div class="sample-turtorial">
        <div id="ss" style="width: 100%; height: 300px; border: 1px solid gray;"></div>
        <div class="demo-options">
            <div class="option-row">
                <input type="checkbox" id="isSheetProtected" />
                <label for="IsSheetProtected">IsSheetProtected</label>
                <input type="checkbox" id="isLocked" checked />
                <label for="isLocked">IsLocked</label>
                <input type="checkbox" id="isVisible" checked />
                <label for="isVisible">IsVisible</label>
            </div>
            <div class="option-row">
                <input type="checkbox" id="dynamicSize" checked />
                <label for="dynamicSize">DynamicSize</label>
                <input type="checkbox" id="dynamicMove" checked />
                <label for="dynamicMove">DynamicMove</label>
            </div>
            <div class="option-row">
                <input type="button" id="moveFloatingObject" value="Move floating Object" />
                <label for="moveRow">Row:</label>
                <input type="text" id="moveRow" />
                <label for="moveColumn">Column:</label>
                <input type="text" id="moveColumn" />
            </div>
            <div class="option-row">
                <input type="button" id="resizeFloatingObject" value="Resize floating object" />
                <label for="resizeWidth">Width:</label>
                <input type="text" id="resizeWidth" />
                <label for="resizeHeight">Height:</label>
                <input type="text" id="resizeHeight" />
            </div>
            <div class="option-row">
                <input type="button" id="bringToForward" value="Bring to Forward" />
            </div>
        </div>
    </div>
</body>
</html>
